<template>
  <div class="tab-switch">
    <div class="tab-group">
      <div
        class="tab-btn"
        :class="{ active: i === value }"
        :style="`border-color:${n.color} `"
        v-for="(n, i) in tabList"
        :key="n.t"
        @click="$emit('input', i)"
      >
        {{ n.t }}
      </div>
    </div>
    <div class="tab-content">
      <component
        :is="tabList[value].components"
        :data="tabList[value].data"
      ></component>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    tabList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {},
  mounted: function() {},
  components: {},
};
</script>
<style lang="scss" scoped>
.tab-switch {
  width: 100%;
  .tab-content {
    margin-top: 20px;
  }
  .tab-group {
    width: 100%;
    height: 28px;
    display: flex;
    .tab-btn {
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
      //width: 130px;
      flex: 1;
      color: #787dab;
      border-bottom: 1px solid;
      cursor: pointer;
      &.active {
        color: #fff;
        background-color: #2c3453;
      }
    }
    .tab-btn:nth-child(1) {
      flex: 1.5;
    }
    .tab-btn:nth-child(2) {
      flex: 1.5;
    }
    .tab-btn:nth-child(5) {
      flex: 1.5;
    }
  }
}
</style>
